<template>
    <Todoinput @add="addTodo" />
    <Todolist :data="newData" @del="delTodo" @getFlag="handleGetFlag" :allCount="allCount" :completedCount="completedCount" :activeCount="activeCount"/>
</template>
<script setup>
import Todoinput from './todoinput.vue';
import Todolist from './todolist.vue';
import { ref, computed } from "vue"
//功能
//1.列表展示

//2.增加功能

//3.删除功能

//4.选中和未选中

//5.展示数量

//6.永久存储

//声明数据
let data = ref([
    {
        id: 1,
        todo: '吃',
        isCompleted: false
    },
    {
        id: 2,
        todo: '看世界杯',
        isCompleted: true
    },
])
//增加todo
let addTodo = (input) => {
    console.log(input)
    //声明一个对象再push
    let obj = {
        id: Math.random().toString(32).substring(2),
        todo: input,
        isCompleted: false
    }
    data.value.push(obj)
}

//删除Todo

let delTodo = input => {
    console.log(input)
    data.value.splice(input, 1)
}

//接收筛选的字段

let filterFlag = ref("all")

let handleGetFlag = flag => {
    console.log(flag)
    filterFlag.value = flag
}

//声明三个响应式变量,根据计算属性来进行赋值操作
    let allCount = ref(0)
    let completedCount = ref(0)
    let activeCount = ref(0)
//处理数据
let newData = computed(() => {

    let all = data.value ;//全部的数据

    //已完成数据
    let completed = data.value.filter(item => item.isCompleted)

    //未完成数据
    let active = data.value.filter(item => !item.isCompleted)

    //全部数量
    allCount.value = all.length;

    //已完成数量
    completedCount.value = completed.length;

    //未完成数量
    activeCount.value = active.length

    switch (filterFlag.value) {
        case "all":
            return all
        case "completed":
            return completed
        case 'active':
            return active
    }
})
</script>